import React, {Component} from 'react';
import PropTypes from 'prop-types';
// 基于swiper组件 http://idangero.us/swiper 实现
class ReactSwiper extends Component {
  //可能需要传入的参数
  static propTypes = {
    className: PropTypes.string, // 自定义 className
    prefix: PropTypes.string, // 样式前缀
    options: PropTypes.object, // swiper 组件选项
    dataSource: PropTypes.array, // 数据源
    renderRow:PropTypes.func,
    lastElemnet:PropTypes.any, //最后一个数据
    lastClass:PropTypes.object //最后样式
  };

  static defaultProps = {
    className: '',
    prefix: 'swiper',
    options:{
    	
    },
    lastElemnet:null
  };
  constructor(props) {
    super(props);
  }
  componentDidMount() {
  	
    this.swiper = new Swiper(`.${this.props.prefix}-container`, {
       ...(this.props.options || {})
    });

  }
  render() {
    const {
      className, prefix, dataSource
    } = this.props;
    return (
      <div className={`${prefix}-container ${className || ''}`} >
        <div className={`${prefix}-wrapper`}>
          {
          	dataSource.map((rowData,rowId)=>
          	(
          		<div className={`${prefix}-slide`} key={rowId}>
          			{
          				this.props.renderRow(rowData,rowId)
          			}
          		</div>
          	))
          }
          {
          	this.props.lastElemnet!==null?
          	(<div className={`${prefix}-slide `}  style={this.props.lastClass}>
          		{this.props.lastElemnet}
          	</div>):""
          }
        </div>
      </div>
    );
  }
}

export default ReactSwiper;
